<!--HPA(Horizontal Pod Autoscaler) -  POD水平自动伸缩-->
<template>
    <el-card>
        <el-form label-position="top" size="small" ref="hpaForm" :model="hpaModel">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item :label="$t('deployService.hpa.form.minReplicas')" prop="minReplicas"
                                  :rules="[{ required: true, message: $t('deployService.hpa.tip.minReplicas'), trigger: 'blur' }]">
                        <el-input v-model="hpaModel.minReplicas" oninput="value=value.replace(/[^\d]/g,'')"
                                  :placeholder="$t('deployService.hpa.tip.minReplicas')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('deployService.hpa.form.maxReplicas')" prop="maxReplicas"
                                  :rules="[{ required: true, message: $t('deployService.hpa.tip.maxReplicas')}]">
                        <el-input v-model="hpaModel.maxReplicas" oninput="value=value.replace(/[^\d]/g,'')"
                                  :placeholder="$t('deployService.hpa.tip.maxReplicas')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider content-position="left">{{ $t('inf.benchmark.detail') }}</el-divider>
            <el-card shadow="hover" v-for="(item,index) in hpaModel.indicatorData" :key="index"
                     style="margin-bottom: 5px">
                <el-alert type="warning" :title="$t('deployService.hpa.tip.t2')" show-icon :closable="false"></el-alert>
                <el-row :gutter="20">
                    <el-col :span="24"><!--指标名称  -->
                        <el-form-item :label="$t('deployService.hpa.form.IndicatorName')"
                                      :prop="`indicatorData.${index}.name`"
                                      :rules="[{ required: true, message: $t('deployService.hpa.tip.IndicatorName'), trigger: 'change'}]">
                            <el-select v-model="item.name" style="width: 100%" filterable @change="changeType(index,item.name)">
                                <el-option v-for="d in customTargets" :key="d" :label="d" :value="d"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('deployService.hpa.form.targetType')"
                                      :prop="`indicatorData.${index}.targetType`"
                                      :rules="[{ required: true, message: $t('deployService.hpa.tip.targetType'), trigger: 'change'}]">
                            <el-select v-model="item.targetType" @change="$forceUpdate()" style="width: 100%">
                                <el-option v-for="(value,key) in getTargetTypes(item.name)" :key="key" :label="value"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('deployService.hpa.form.value')" :prop="`indicatorData.${index}.value`"
                                      :rules="[{ required: true, message: $t('deployService.hpa.tip.value'), trigger: 'change'}]">
                            <el-input v-model="item.value" onkeyup="value=value.replace(/[^\d]/g,'')">
                                <template slot="append">{{ item.targetType|getValueUnit }}</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--对象类型展示信息-->
                <el-row type="flex" justify="end">
                    <el-col :span="3">
                        <el-button size="mini" type="primary" @click="addItems(index,hpaModel.indicatorData)">
                            {{ $t('deployService.hpa.form.addIndicator') }}
                        </el-button>
                    </el-col>
                    <el-col :span="3">
                        <el-button size="mini" type="danger" @click="delItems(index,hpaModel.indicatorData)">
                            {{ $t('deployService.hpa.form.delIndicator') }}
                        </el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>

        <el-row type="flex" justify="end" style="margin-top:15px">
            <el-col :span="2">
                <el-button size="mini" type="primary" @click="save">{{ $t('operate.save') }}</el-button>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
export default {
    props: ["hpaModel", "serverData", "sourceModel", "indicators"],
    name: "hpa",
    data() {
        return {
            customTargets: ["cpu","memory"]
        }
    },
    mounted() {
        // master版本目前不放出自定义指标,只留系统指标
        // this.$ajax.getJSON('/k8s/api/get_hpa_target', {}).then((data) => {
        //     this.customTargets = data
        // }).catch((err) => {
        //     this.$tip.error(`${this.$t('common.error')}: ${err.err_msg || err.message}`);
        // });
    },
    filters: {
        getValueUnit(val) {
            if (val.toLowerCase() == "averagevalue") return "MiB";
            if (val.toLowerCase() == "averageutilization") return "%";
            else return "MiB"
        },
    },
    methods: {
        save() {
            if (!this.sourceModel.limitCpu && !this.sourceModel.limitMem && !this.sourceModel.requestCpu && !this.sourceModel.requestMem) {
                this.$message.error(`${this.$t('deployService.resources.tip.resources')}`)
                return
            }
            this.$refs.hpaForm.validate(valid => {
                let data = Object.assign({}, {ServerId: this.serverData.ServerId}, this.hpaModel, {serverData: this.serverData})
                if (valid) {
                    this.$ajax.postJSON('/k8s/api/create_hpa', data).then((res) => {
                        this.$message.success(`${this.$t('common.success')}`);
                    }).catch((err) => {
                        this.$message.error(`${this.$t('common.error')}: ${err.err_msg || err.message}`);
                    });
                } else {
                    this.$message.warning(`${this.$t('deployService.hpa.tip.checkForm')}`);
                }
            })
        },
        addItems(index, obj) {
            obj.splice(index + 1, 0, {name: "cpu", targetType: "AverageUtilization", value: ""})
            this.$forceUpdate();
        },
        delItems(index, obj) {
            if (obj.length === 1) {
                return;
            }
            obj.splice(index, 1);
            this.$forceUpdate();
        },

        changeType(index, val) {
            let matchIndicators = this.getMatchIndicators(val);
            this.$set(this.hpaModel.indicatorData[index], "targetType", matchIndicators.target[0].type);
            this.$forceUpdate()
        },
        getMatchIndicators(indicator) {
            let res
            for (let item of this.indicators) {
                if (item.matchType == "exact") {
                    if (item.match.toLowerCase() == indicator.toLowerCase()) {
                        res = item;
                        break;
                    }
                }
                if (item.matchType == "regex") {
                    let reg = new RegExp(item.match)
                    if (reg.test(indicator)) {
                        res = item;
                        break;
                    }
                }
            }
            if (!res) {
                this.$message.error(`${this.$t('deployService.hpa.tip.noIndicator')}`)
            }
            return res
        },
        getTargetTypes(val) {
            let matchIndicator = this.getMatchIndicators(val);
            let res = {}
            matchIndicator.target.forEach(item => {
                if (item.type.toLowerCase() == "AverageValue".toLowerCase()) {
                    res[item.type] = this.$t("deployService.hpa.form.averageValue");
                }
                if (item.type.toLowerCase() == "AverageUtilization".toLowerCase()) {
                    res[item.type] = this.$t("deployService.hpa.form.averageUtilization")
                }
            })
            return res;
        }
    },
}
</script>

<style scoped>
/deep/ .el-form-item__label {
    line-height: 10px;
}
</style>

